<template>
  <div class="box">
    <van-nav-bar title="登录" left-arrow @click-left="goBack"></van-nav-bar>
    <div class="logo_pic">
      <img src="https://m.juooo.com/static/img/login_logo.4a43235.png" alt="">
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="tel"
        label="手机号"
        placeholder="手机号"
        :clearable="true"
        :rules="[{ required: true, pattern: pattern1, message: '请填写手机号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码(不能少于6位)' }]"
      />
      <div style="margin: 0.16rem;">
        <van-button round block type="info" native-type="submit">
          去登陆
        </van-button>
      </div>
    </van-form>
    <div class="login">
      <span @click="goChangePwd">忘记密码</span>
      <span @click="goLogin">去注册</span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, field, button, Toast } from 'vant'
import { login } from '@/api'
Vue.use(NavBar)
Vue.use(Form)
Vue.use(button)
Vue.use(field)
Vue.use(Toast)
export default {
  data () {
    return {
      username: '',
      password: '',
      pattern1: /^1[3456789]\d{9}$/
    }
  },
  mounted () {},
  methods: {
    onSubmit (values) {
      // console.log(values)
      login({
        tel: values.tel,
        password: values.password
      }).then(res => {
        // console.log(res.data)
        const { code } = res.data
        if (code === '10400') {
          Toast('信息填写不完整')
        } else if (code === '10808') {
          Toast('该用户未注册')
        } else if (code === '10505') {
          Toast('密码错误')
        } else {
          Toast('登陆成功')
          localStorage.setItem('userid', res.data.data.userid)
          localStorage.setItem('token', res.data.data.token)
          localStorage.setItem('nickname', res.data.data.nickname)
          localStorage.setItem('user', values.tel)
          // localStorage.setItem('sex', values.tel)
          localStorage.setItem('loginState', 'ok')
          this.$router.replace('/user')
        }
      })
    },
    goLogin () {
      this.$router.push('/register')
    },
    goChangePwd () {
      this.$router.push('/changePwd')
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.logo_pic {
  width: 100%;
  height: 1.12rem;
  img {
    width: 1.6rem;
    height: 0.5rem;
    display: block;
    margin: 0.28rem auto 0.34rem auto;
  }
}
.login {
  width: 100%;
  height: 0.2rem;
  line-height: 0.2rem;
  box-sizing: border-box;
  padding: 0 0.2rem;
  span:nth-of-type(1) {
    float: left;
  }
  span:nth-of-type(2) {
    float: right;
  }
}
/deep/ .van-icon-arrow-left {
  font-size: 0.2rem;
  color: black;
}
/deep/ .van-button--info {
  background-image: linear-gradient(50deg, rgb(255, 154, 52), rgb(255, 77, 74));
  border: none;
}
</style>
